<template>
  <div class="search-box content-fade-upper">
    <input-angle style="width: 10%">
      <a-input
        v-model="input"
        style="background-color: #ffffff00; color: white"
        :bordered="false"
        placeholder="搜索道路"
      />
    </input-angle>
    <t-select :list="area" placeholder="行政区划" style="width: 10%; margin-left: 1%"></t-select>

    <t-select :list="road" placeholder="全部道路" style="width: 10%; margin-left: 1%"></t-select>
    <t-select
      :list="buildCondition"
      placeholder="全部建设情况"
      style="width: 10%; margin-left: 1%"
    ></t-select>
    <el-button type="primary" style="margin-left: 1%">查询</el-button>
    <layer-tools default-views="拥堵情况" />
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs, ref } from 'vue';
  import inputAngle from '../components/inputAngle.vue';
  import layerTools from '@/components/layerTools/index.vue';
  import tSelect from '@/components/tSelect';

  export default defineComponent({
    components: { layerTools, inputAngle, tSelect },
    setup() {
      const state = reactive({
        congestionShow: false,
      });
      const input = ref('');
      const value = ref('');
      const value2 = ref('');
      const value3 = ref('');
      const area = [
        {
          value: '兰山区',
          label: '兰山区',
        },
        {
          value: '河东区',
          label: '河东区',
        },
        {
          value: '罗庄区',
          label: '罗庄区',
        },
        {
          value: '郯城县',
          label: '郯城县',
        },
        {
          value: '兰陵县',
          label: '兰陵县',
        },
        {
          value: '沂水县',
          label: '沂水县',
        },
        {
          value: '沂南县',
          label: '沂南县',
        },
        {
          value: '平邑县',
          label: '平邑县',
        },
        {
          value: '费县',
          label: '费县',
        },
        {
          value: '蒙阴县',
          label: '蒙阴县',
        },
        {
          value: '莒南县',
          label: '莒南县',
        },
        {
          value: '临沭县',
          label: '临沭县',
        },
      ];
      const road = [
        {
          value: '沂蒙北路',
          label: '沂蒙北路',
        },
        {
          value: '滨河路',
          label: '滨河路',
        },
        {
          value: '蒙山高架路',
          label: '蒙山高架路',
        },
        {
          value: '通达路',
          label: '通达路',
        },
        {
          value: '北京路',
          label: '北京路',
        },
        {
          value: '沂河高架路',
          label: '沂河高架路',
        },
      ];
      const buildCondition = [
        {
          value: '已完成',
          label: '已完成',
        },
        {
          value: '未完成',
          label: '未完成',
        },
      ];
      const options = [
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
        {
          value: 'Option4',
          label: 'Option4',
        },
        {
          value: 'Option5',
          label: 'Option5',
        },
      ];
      return {
        input,
        value,
        value2,
        value3,
        area,
        road,
        buildCondition,
        options,
        ...toRefs(state),
      };
    },
  });
</script>
<style lang="less" scoped>
  .search-box {
    position: absolute;
    top: 1%;
    left: 0;
    width: 100%;
    z-index: 4;
    margin-bottom: 10px;
    padding: 0 30px;
    display: flex;
    align-items: center;
  }
  :deep(.el-input__wrapper) {
    background-color: #ffffff00;
    box-shadow: 0px 0px 0px;
    color: white;
    height: 2.5vw;
    line-height: 2.5vw;
  }
  :deep .el-select {
    --el-select-border-color-hover: none;
    --el-select-input-focus-border-color: none;
  }
</style>
